<template>
    <div class="GZHJ_wraper">
        <div class="wrap">
            <div class="header">
                <div class="header_title">{{ $t('p6.tab2.title') }}</div>
                <div class="icon"></div>
            </div>

            <div class="imgs_wrap">

                <div class="bbox1">
                    <div class="card_title bc3">
                        <div class="wap">
                            <div class="icon"><img :src="gz22" alt=""></div>
                            <span>{{ $t('p6.tab2.item1.title') }}</span>
                        </div>
                    </div>
                    <div class="card_image">
                        <img :src="gz1" alt="">
                    </div>
                </div>

                <div class="bbox1">
                    <div class="card_desc">
                        {{ $t('p6.tab2.item1.desc') }}
                    </div>
                    <div class="card_image">
                        <img :src="gz2" alt="">
                    </div>
                </div>

                <div class="bbox2 mt10">
                    <div class="card_image">
                        <img :src="gz3" alt="">
                    </div>
                    <div class="card_title bc2">
                        <div class="wap">
                            <div class="icon"><img :src="gz11" alt=""></div>
                            <span>{{ $t('p6.tab2.item2.title') }}</span>
                        </div>
                    </div>
                </div>
                <div class="bbox2">
                    <div class="card_image">
                        <img :src="gz4" alt="">
                    </div>
                    <div class="card_desc">
                        {{ $t('p6.tab2.item2.desc') }}
                    </div>
                </div>


                <div class="bbox1 mt10">
                    <div class="card_desc">
                        {{ $t('p6.tab2.item3.desc') }}
                    </div>
                    <div class="card_image">
                        <img :src="gz5" alt="">
                    </div>
                </div>
                <div class="bbox1">
                    <div class="card_title bc2">
                        <div class="wap">
                            <div class="icon"><img :src="gz33" alt=""></div>
                            <span>{{ $t('p6.tab2.item3.title') }}</span>
                        </div>
                    </div>
                    <div class="card_image">
                        <img :src="gz6" alt="">
                    </div>
                </div>


                <div class="bbox2 mt10">
                    <div class="card_image">
                        <img :src="gz8" alt="">
                    </div>
                    <div class="card_desc">
                        {{ $t('p6.tab2.item4.desc') }}
                    </div>
                </div>
                <div class="bbox2">
                    <div class="card_image">
                        <img :src="gz7" alt="">
                    </div>
                    <div class="card_title bc3">
                        <div class="wap">
                            <div class="icon"><img :src="gz44" alt=""></div>
                            <span>{{ $t('p6.tab2.item4.title') }}</span>
                        </div>
                    </div>
                </div>


                <!-- <div class="box">
                    <div class="card_view">
                        <div class="desc_w1 bc3">
                            <div class="wap">
                                <div class="icon"><img :src="gz22" alt=""></div>
                                <span>园区景观</span>
                            </div>
                        </div>
                        <div class="img_box">
                            <el-image
                                :src="gz1"
                                fit="fill">
                            </el-image>
                        </div>
                    </div>
                    <div class="card_view">
                        <div class="desc_w2 bc1">
                            园区坐拥牛角岭公园，紧邻体育公园、玉树公园，空气清新、自然环境优美，绿色生态，天然氧吧
                        </div>
                        <div class="img_box">
                            <el-image
                                :src="gz2"
                                fit="fill">
                            </el-image>
                        </div>
                    </div>
                </div>

                <div class="box">
                    <div class="card_view">
                        <div class="img_box">
                            <el-image
                                :src="gz3"
                                fit="fill">
                            </el-image>
                        </div>
                        <div class="desc_w1 bc2">
                            <div class="wap">
                                <div class="icon"><img :src="gz11" alt=""></div>
                                <span>休闲区域</span>
                            </div>
                        </div>
                    </div>
                    <div class="card_view">
                        <div class="img_box">
                        <el-image
                            :src="gz4"
                            fit="fill">
                        </el-image>
                    </div>
                        <div class="desc_w2 bc1">
                            多功能，灵动多彩，创意空间
                        </div>
                    </div>
                </div>

                <div class="box">
                    <div class="card_view">
                        <div class="desc_w2 bc1">
                            270°采光，宽敞明亮，整洁舒适，尽揽科学城CBD景观
                        </div>
                        <div class="img_box">
                            <el-image
                                :src="gz5"
                                fit="fill">
                            </el-image>
                        </div>
                    </div>
                    <div class="card_view">
                        <div class="desc_w1 bc2">
                            <div class="wap">
                                <div class="icon"><img :src="gz33" alt=""></div>
                                <span>办公区域</span>
                            </div>
                        </div>
                        <div class="img_box">
                            <el-image
                                :src="gz6"
                                fit="fill">
                            </el-image>
                        </div>
                    </div>
                </div>

                <div class="box">
                    <div class="card_view">
                        <div class="img_box">
                            <el-image
                                :src="gz8"
                                fit="fill">
                            </el-image>
                        </div>
                        <div class="desc_w2 bc1">
                            地铁上盖，甲级写字楼，成熟配套，智慧园区
                        </div>
                    </div>
                    <div class="card_view">
                        <div class="img_box">
                            <el-image
                                :src="gz7"
                                fit="fill">
                            </el-image>
                        </div>
                        <div class="desc_w1 bc3">
                            <div class="wap">
                                <div class="icon"><img :src="gz44" alt=""></div>
                                <span>园区配套</span>
                            </div>
                        </div>
                    </div>
                </div> -->

            </div>
        </div>
    </div>
</template>
<script>
import gz1 from '@/assets/images/wi/gz1.png'
import gz2 from '@/assets/images/wi/gz2.png'
import gz3 from '@/assets/images/wi/gz3.png'
import gz4 from '@/assets/images/wi/gz4.png'
import gz5 from '@/assets/images/wi/gz5.png'
import gz6 from '@/assets/images/wi/gz6.png'
import gz7 from '@/assets/images/wi/gz7.png'
import gz8 from '@/assets/images/wi/gz8.png'
import gz11 from '@/assets/images/wi/gz11.png'
import gz22 from '@/assets/images/wi/gz22.png'
import gz33 from '@/assets/images/wi/gz33.png'
import gz44 from '@/assets/images/wi/gz44.png'
import { getStore } from '@/libs'
export default {
    name: "index",
    components: {

    },
    data() {
        return {
            gz1,gz2,gz3,gz4,gz5,gz6,gz7,gz8,gz11,gz22,gz33,gz44,
            params: null,

            imgUrl: 'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg'
        }
    },

    created() {
        this.params = this.$route.query
    },
    methods: {

    }
};
</script>


<style lang="scss" scope>
.GZHJ_wraper{
    color: #333333;
    .wrap{
        .header{
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            margin-top: 40px;
            .header_title{
                font-size: 28px;
                font-weight: bold;
            }
            .icon{
                margin-top: 5px;
                display: block;
                width: 35px;
                height: 5px;
                background-color: #98000A;
                border-top: 2px solid #FCA400;
            }
        }

        .title_desc{
            display: flex;
            justify-content: center;
            margin-top: 40px;

        }
        .imgs_wrap{
            display: flex;
            margin: 50px 0;
            flex-direction: column;
            padding: 0 20px;
            margin-left: 5px;

            .bbox1{
                display: flex;
                .card_title{
                    display: flex;
                    width: 300px;
                    box-sizing: border-box;
                    padding: 20px;
                    .wap{
                        flex: 1;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        margin-left: 20px;
                        margin-top: 20px;
                        color: #fff;
                        font-size: 28px;
                        width: 160px;
                        div.icon{
                            width: 100px;
                            img{
                                width: 100%;
                            }
                        }
                        span{
                            width: 60px;
                            padding: 20px 0px 10px 0px;
                            display: block;
                            border-bottom: 2px solid #fff;
                        }
                    }

                }
                .card_desc{
                    box-sizing: border-box;
                    display: flex;
                    padding: 20px;
                    width: 300px;
                }
                .card_image{
                    display: flex;
                    width: 100%;
                    img{
                        width: 100%;
                    }
                }
            }

            .bbox2{
                display: flex;
                .card_title{
                    display: flex;
                    width: 300px;
                    box-sizing: border-box;
                    padding: 20px;
                    .wap{
                        flex: 1;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        margin-left: 20px;
                        margin-top: 20px;
                        color: #fff;
                        font-size: 28px;
                        width: 160px;
                        div.icon{
                            width: 100px;
                            img{
                                width: 100%;
                            }
                        }
                        span{
                            width: 60px;
                            padding: 20px 0px 10px 0px;
                            display: block;
                            border-bottom: 2px solid #fff;
                        }
                    }

                }
                .card_desc{
                    box-sizing: border-box;
                    display: flex;
                    padding: 20px;
                    width: 300px;
                }
                .card_image{
                    display: flex;
                    background: blue;
                    width: 100%;
                    img{
                        width: 100%;
                    }
                }
            }

            .box{
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                width: 100%;
                margin: 20px 0;
                border: 1px solid #000;

                .card_view{
                    display: flex;
                    .wap{
                        flex: 1;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        margin-left: 20px;
                        margin-top: 20px;
                        color: #fff;
                        font-size: 28px;
                        width: 160px;
                        div.icon{
                            width: 100px;
                            img{
                                width: 100%;
                            }
                        }
                        span{
                            width: 60px;
                            padding: 20px 0px 10px 0px;
                            display: block;
                            border-bottom: 2px solid #fff;
                        }
                    }

                    .img_box{
                        display: flex;
                        flex: 1;
                        width: 100%;
                        height: 400px;
                        // width: 460px;
                        img{
                            width: 400px;
                            height: 100%;
                        }
                        .el-image{
                            height: 100%;
                            width: 100%;
                        }
                    }
                }
            }

        }
    }
}
.bc1{
    background: #fff;
}

.bc2{
    background: #FCA400;
}
.bc3{
    background: #98000A;
}
.desc_w1{
    display: flex;
    flex: 1;
    // width: 300px;
}
.desc_w2{
    box-sizing: border-box;
    display: flex;
    flex: 1;
    width: 300px;
    padding: 20px;
    font-size: 28px;
}
</style>
